<template>
    <van-dialog
        v-model="isShow"
        width="241px"
        :showConfirmButton="false"
        class="system-error-container"
        :before-close="close"
        :close-on-click-overlay="true"
    >
        <img :src="image" alt="" />
        <p class="title">系统维护升级中…</p>

        <p class="content">系统正在维护升级中，请您稍后重试～</p>
        <van-button type="primary" @click="close">确定</van-button>
    </van-dialog>
</template>

<script>
import Vue from "vue";
import { Field, Button, Toast } from "vant";
Vue.use(Field);
Vue.use(Button);
Vue.use(Toast);
export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            image: require("../../assets/img/system-error.png"),
            isShow: false,
        };
    },
    watch: {
        show(val) {
            this.isShow = val;
        },
    },
    created() {},
    mounted() {},
    methods: {
        close() {
            this.$emit("close");
        },
    },
};
</script>

<style lang="less" scoped>
.system-error-container {
    padding-bottom: 20px;
    text-align: center;

    img {
        width: 100%;
        object-fit: contain;
        height: 139px;
        background: #fcf5f5;
    }

    .title {
        font-size: 15px;
        font-weight: bold;
        color: #242728;
        line-height: 21px;
        margin: 12px 0 8px 0;
    }

    .content {
        font-size: 12px;
        font-weight: 400;
        color: #7f8284;
        line-height: 17px;
        width: 149px;
        margin-left: calc(50% - 75px);
    }

    .van-button {
        margin-top: 25px;
        width: 145px;
        height: 42px;
        background: linear-gradient(180deg, #f34651 0%, #d61c22 100%);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 21px;
        border: none;
    }
}
</style>
